<script type="text/html" id="menu-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="goAdd"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</script>

<script type="text/html" id="menu-row-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-menu">编辑</a>
</script>

<table class="layui-table" lay-filter="menu-table" id="menu-table">
</table>


<script>
    layui.use(['table','layer','form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        table.render({
            id: "menu-table"
            , elem: "#menu-table"
            , url: "sys/menu/list"
            , toolbar: "#menu-head-bar"
            , cellMinWidth: 80  //单元格最小宽度，layui会自动分配单元格宽度，自适应内容
            , cols: [[
                {checkbox: true}
                , {
                    field: 'name', title: '菜单名称', templet: function (data) {
                        var left = data.type * 40;
                        return "<span style='margin-left: " + left + "px'>" + data.name + "</span>"
                    }
                }
                , {field: 'url', title: '菜单地址'}
                , {
                    field: 'type', title: '类型', templet: function (data) {
                        switch (data.type) {
                            case 0:
                                return "<span class='layui-badge layui-bg-orange'>目录</span>"
                            case 1:
                                return "<span class='layui-badge layui-bg-green'>菜单</span>"
                            case 2:
                                return "<span class='layui-badge layui-bg-blue'>按钮</span>"
                        }
                    }
                }
                ,{field: 'sort',title:'排序'}
                ,{field: 'right',title: '操作',toolbar:"#menu-row-bar"}
            ]]
        })

        /** 添加、删除监听 */
        table.on('toolbar(menu-table)',function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'goAdd':
                    openEditWindow(null);
                    break;
                case 'delete':
                    var data = table.checkStatus('menu-table').data;  //拿到选中行
                    //删除操作
                    if (data.length>0){
                        layer.confirm('真的删除行么？',function (index,layero) {
                            var ids = new Array();
                            $.each(data,function (i,e) {
                                ids.push(e.id);
                            });
                            $.ajax({
                                url:'sys/menu/delete'
                                ,type:'POST'
                                ,data:"ids="+ids
                                ,success:function (result) {
                                    if(result.state){
                                        table.reload('menu-table',{});  //重新加载表格
                                    }else {
                                        layer.msg(result.message);
                                    }
                                    layer.close(index);
                                }
                            });
                        })

                    }
                    break;
            }
        })

        /** 编辑监听 */
        table.on('tool(menu-table)',function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-menu':
                    openEditWindow(data);
                    break;
            }
        })

        function openEditWindow(data) {
            layer.open({
                type:1
                ,area:['500px','500px']
                ,zIndex:2000
                ,content:$('#menu-edit-window').html()
                ,btn:['确定','取消']
                ,success:function () {
                    form.render();
                    if(data != null){
                        $.ajax({
                            url:"sys/menu/info" //根据id获取菜单信息
                            ,type:'post'
                            ,data:"id="+data.id
                            ,success:function (obj) {
                                form.val('menu-edit-form',obj);    //回填信息
                            }
                        })
                    }
                    $("#parentId").combotree({
                        url:"sys/menu/tree"
                        ,formatter:function (node) {
                            return node.name;
                        },valueField:'id',  //传给后台的value
                        textField:'name'    //页面上看见的
                    });
                },yes:function (index,layero) {
                    $.ajax({
                        url:"sys/menu/"+(data==null?"add":"update"),
                        type:"post",
                        data:$('#menu-edit-form').serialize(),
                        success:function (result) {
                            if(result.state){
                                table.reload('menu-table',{});
                            }else {
                                layer.msg(result.message)
                            }
                            layer.closeAll();
                        }
                    })

                },btn2:function (index,layero) {
                    layer.close(index);
                }
            })
        }
    })

    //下拉框

</script>

<script type="text/html" id="menu-edit-window">
    <form id="menu-edit-form" style="width: 90%;padding-top:20px" lay-filter="menu-edit-form" class="layui-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="0" title="目录" lay-filter="menu-type">
                <input type="radio" name="type" value="1" title="菜单" lay-filter="menu-type">
                <input type="radio" name="type" value="2" title="按钮" lay-filter="menu-type">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入菜单名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父节点</label>
            <div class="layui-input-block">
                <input class="easyui-combotree" name="parentId" id="parentId"
                       style="width:220px;">
                <button onclick="$('#parentId').combotree('clear')" type="button" class="layui-btn layui-btn-sm">清空
                </button>
            </div>
        </div>
        <div class="layui-form-item" id="url-div">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入url" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="menu-sort">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" placeholder="请输入整数" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label">权限</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <input type="text" name="perms" lay-verify="required" placeholder="请输入权限" autocomplete="off"-->
        <!--                       class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->
    </form>
</script>